<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@page import="itsm.isperp.framework.domain.IUser"%>
<%@ page pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<link rel="stylesheet" type="text/css"
	href="css/external/jquery-timeliner.css" />
<script type="text/javascript" charset="utf-8"
	src="js/libs/editor/ueditor.simple.config.js"></script>
<script type="text/javascript" src="js/libs/editor/ueditor.js"></script>


<script type="text/javascript" charset="utf-8"
	src="js/libs/timeline/jquery-timeliner.js"></script>



<style>
<!--
body {
	overflow: hidden;
	background-color: #EFEFEF
}

.tabbedBoxFixed>.header {
	background-color: #EFEFEF
}

#timeliner {
	overflow-y: scroll
}

div.timeliner .columns>li:nth-child(2n+1) .timeliner_element {
	background: #e57373 !important;
	color: #ffffff !important
}

div.timeliner .columns>li:nth-child(2n+2) .timeliner_element {
	background: #00acc1 !important;
	color: #ffffff !important
}

div.timeliner .columns>li:nth-child(2n+1) .timeliner_element:after {
	background: #e57373 !important;
}

div.timeliner .columns>li:nth-child(2n+2) .timeliner_element:after {
	background: #00acc1 !important;
}

div.timeliner .columns>li:nth-child(2n+1) .timeliner_date, div.timeliner .columns>li:nth-child(2n+2) .timeliner_date
	{
	color: #ffffff !important
}

div.timeliner .columns>li:nth-child(2n+2) .timeliner_date {
	float: left !important
}

.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

.btn {
	display: inline-block;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

.fa-pencil {
	background: url(img/skin_blue/bg.png);
	background-position: -126px -286px !important;
	content: " ";
	width: 12px;
	height: 12px;
}

.fa-plus {
	background: url(img/skin_blue/bg.png);
	background-position: -140px -319px !important;
	content: " ";
	width: 12px;
	height: 12px;
}

.edui-editor {
	border-top: none !important;
	border-right: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	border-bottom: 1px solid #eee !important
}

.header h2 {
	font-size: 18px
}

.header .nui-txt-link {
	line-height: 22px
}

.talk {
	height: auto;
	margin: 0 auto;
}

.talk_title {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-indent: 12px;
	font-size: 16px;
	font-weight: bold;
	color: #afafaf;
	background: #212121;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #434343;
	font-family: "微软雅黑";
}

.talk_title span {
	float: left
}

.talk_title_c {
	width: 100%;
	height: 30px;
	line-height: 30px;
}

.talk_record {
	width: 100%;
	height: 340px;
	overflow-y: scroll;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin: 0px;
	border-bottom-style: solid;
}

.talk_word {
	height: auto;
	width: 100%;
	position: relative;
	padding: 0
}

.messages {
	width: 100%;
	overflow: hidden;
}

.talk_send {
	width: 50px;
	height: 34px;
	line-height: 24px;
	font-size: 12px;
	border: 0px;
	margin-left: 2px;
	color: #fff;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color: transparent;
	font-family: "微软雅黑";
}

.talk_send:hover {
	background-position: 0px -24px;
}

.talk_record ul {
	padding-left: 5px;
}

.talk_record li {
	line-height: 25px;
}

.talk_word .controlbtn a {
	margin: 12px;
}

.talk .talk_word .order {
	float: left;
	display: block;
	height: 14px;
	width: 16px;
	background-image: url(../images/loop.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.talk .talk_word .loop {
	float: left;
	display: block;
	height: 14px;
	width: 16px;
	background-image: url(../images/loop.png);
	background-repeat: no-repeat;
	background-position: -30px 0px;
}

.talk .talk_word .single {
	float: left;
	display: block;
	height: 14px;
	width: 16px;
	background-image: url(../images/loop.png);
	background-repeat: no-repeat;
	background-position: -60px 0px;
}

.talk .talk_word .order:hover, .talk .talk_word .active {
	background-position: 0px -20px;
	text-decoration: none;
}

.talk .talk_word .loop:hover {
	background-position: -30px -20px;
	text-decoration: none;
}

.talk .talk_word .single:hover {
	background-position: -60px -20px;
	text-decoration: none;
}

.jp-container .talk_recordbox {
	min-height: 80px;
	color: #afafaf;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	display: block;
	clear: both
}

.jp-container .talk_recordbox:first-child {
	border-top: none;
}

.jp-container .talk_recordbox:last-child {
	border-bottom: none;
}

.jp-container .talk_recordbox .talk_recordtextbg {
	float: left;
	width: 10px;
	height: 30px;
	display: block;
	background-image: url(img/talk_recordtext.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.jp-container .talk_recordbox .talk_recordtext {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #b8d45c;
	height: auto;
	display: block;
	padding: 5px;
	float: left;
	color: #333333;
	max-width: 500px;
}

.jp-container .talk_recordbox h3 {
	font-size: 14px;
	padding: 2px 0 5px 0;
	text-transform: uppercase;
	font-weight: 100;
}

.jp-container .talk_recordbox .user {
	float: left;
	display: inline;
	height: 45px;
	width: 45px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}
/*自己发言样式*/
.jp-container .talk_recordboxme {
	display: block;
	min-height: 80px;
	color: #afafaf;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
}

.jp-container .talk_recordboxme .talk_recordtextbg {
	float: right;
	width: 10px;
	height: 30px;
	display: block;
	background-image: url(img/talk_recordtextme.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.jp-container .talk_recordboxme .talk_recordtext {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #fcfcfc;
	height: auto;
	padding: 5px;
	color: #666;
	font-size: 12px;
	float: right;
	max-width: 500px;
}

.jp-container .talk_recordboxme h3 {
	font-size: 14px;
	padding: 2px 0 5px 0;
	text-transform: uppercase;
	font-weight: 100;
	color: #333333;
}

.jp-container .talk_recordboxme .user {
	float: right;
	height: 45px;
	width: 45px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 5px;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	display: inline;
}

.talk_time {
	color: #666;
	text-align: right;
	display: block;
}

#gbox_majorHandleGrid tr.jqgrow td {
	white-space: normal !important;
	height: auto;
	vertical-align: text-top;
	padding: 8px 5px;
	line-height: 20px;
}
-->
</style>



<div style="width:48%;padding-top:10px;padding-left:10px;float: left">
	<div style="margin:0 auto;padding:0 0 5px 0">
		<h1 style="text-align: left;font-size: 18px">
			<a href="javascript:void()"
				onclick="isperp.openDialog({contentUrl:'incident/incident/view?id=${model.id}'})">${model.title }【${model.code }】</a>
		</h1>
	</div>

	<div class="header" style="background: #ccc;padding:0px 2px;">
		<h2 style="font-size: 16px;font-weight: 500">故障概况</h2>
		<c:if test="${editable eq true }">
			<a style="float: right;cursor: pointer;" class="nui-txt-link"
				onclick="isperp.toLocation('incident/incident/major/incidentEdit?id=${model.id}')">编辑</a>
		</c:if>
	</div>
	<div
		style="padding:10px;border:1px solid #ccc;margin-bottom: 15px;font-size:14px">${model.description
		}</div>


	<div style="border:1px solid #ccc;margin-bottom: 15px">
		<div class="header" style="background-color: #ccc;">
			<h2 style="font-weight: normal;font-size: 16px">实时讨论</h2>
		</div>
		<div class="talk">

			<div id="talk_record" class="talk_record">
				<div id="jp-container" class="jp-container"></div>

			</div>

			<div class="talk_word" style="position: relative;">

				<textarea id="chatcontents" class="messages emotion editor"
					style="height:70px;" autocomplete="off"></textarea>
				<div
					style="margin-top:2px;position: absolute;right: 10px;top:102px;">
					<button
						style=" color:#fff;font-size:14px;background: #388bff;width:100px;height:30px;margin-left: 5px"
						type="button" title="发送" value="发送" onclick="sendChat();">发送</button>


				</div>
				<div style="clear: both;height:35px"></div>
			</div>
		</div>
	</div>

</div>
<div style="width:48%;padding-top:10px;padding-right:10px;float: right">


	<div
		style="font-size: 16px;height:30px;margin-bottom: 15px;padding:0px 0px 5px 0;">
		<div style=" ">
			<label style="font-weight: bold;">事件发生时间：<fmt:formatDate
					value="${model.happenTime }" pattern="MM 月 dd 日 HH 时 mm 分" />
			</label>


			<div style="padding:1px 10px;float:right;font-weight: bold;display:none">

				<label>故障时间：</label>&nbsp;<span id="distanceDay"></span>&nbsp;天&nbsp;<span
					id="distanceHour"></span>&nbsp;时&nbsp;<span id="distanceMin"></span>&nbsp;分&nbsp;<span
					id="distanceSec"></span>&nbsp;秒
			</div>
		</div>

	</div>

	<div class="box tabbedBox tabbedBoxFixed">
		<div class="header" style="position: relative;">
			<ul>
				<li><a href="#majorMember">对应体制(<label
						id="majorMemberCount" style="color:red">0</label>)
				</a></li>
				
			</ul>
			<h2>&nbsp;</h2>
		</div>
		<div style="padding:0 !important" class="content tabbed">
			

			<div id="majorMember">
				<c:set var="memberDelete"
					value="${editable eq true?'incident/incident/majorMember/delete':'' }"></c:set>
				<c:set var="memberEditUrl"
					value="${editable eq true?'incident/incident/majorMember/edit':'' }"></c:set>

				<isperp:grid
					url="incident/incident/majorMember/listByIncident?incidentId=${model.id }"
					showPager="true" multiselect="false" showSearchbar="false"
					cusEditUrl="incident/incident/majorMember/edit"
					loadComplete=" $('#majorMemberCount').text( majorMemberGrid.jqGrid.getGridParam('records'));"
					gridId="majorMemberGrid" showToolbar="true" height="auto"
					cusDeleteUrl="${memberDelete }" gridTitle="${pageTitle}">
					<jsp:attribute name="toolbar">
					<a style="float: right;cursor: pointer;" class="nui-txt-link"
							onclick="isperp.openDialog({windowSize:'normal','contentUrl':'incident/incident/majorMember/edit?incidentId=${model.id}&pcontrolid=majorMemberGrid'})">添加成员</a>
			 
		   		 	</jsp:attribute>
					<jsp:body>
					<isperp:column name="id" title="id" hidden="true"></isperp:column>
					<isperp:column name="user_fullname" title="姓名" width="60">
					</isperp:column>
					<isperp:column name="position" title="职位" width="50">
					</isperp:column>
					<isperp:column name="mobile" title="电话" width="70">
					</isperp:column>
					<isperp:column name="position" title="职务"
							width="120">
					</isperp:column>
					</jsp:body>
				</isperp:grid>
			</div>

		</div>

	</div>
</div>

<isperp:buttonList>


	<isperp:processButtons processKey="incidentProcess" viewOnly="true" areHideProcessBtn="true" 
		formId="" processId="${model.processId }" businessKey="${model.id }"></isperp:processButtons>

</isperp:buttonList>
<script type="text/javascript">
<!--
	$("#processRelationGridAdToolbar .toolbar a ").each(function(index, item) {
		if (index > 0)
			$(item).remove();
	});
//-->
</script>


<script type="text/javascript">
    
	var talk_recordbox = "talk_recordbox", talk_recordboxme = "talk_recordboxme";

	var template_talk = '<div id="{id}" class="{talkType}"><div class="user">{sender}</div><div class="talk_recordtextbg">&nbsp;</div><div class="talk_recordtext"><h3>{contents}</h3><span class="talk_time">{sendTime}</span></div></div>';
	var meName = "${currentUser.name}", meFullname = "${currentUser.fullname}";

	function chatcontents_onkeyDown() {
		if (event.keyCode == 13) {
			event.returnValue = false;
			event.cancel = true;
			sendChat();
		}
	}

	function myTalk(id, contents, sendTime) {

		return template_talk.replace("{id}", id).replace("{talkType}", talk_recordboxme).replace("{sender}", meFullname).replace("{contents}", contents).replace("{sendTime}", sendTime);

	}

	function otherTalk(id, sender, contents, sendTime) {
		return template_talk.replace("{id}", id).replace("{talkType}", talk_recordbox).replace("{sender}", sender).replace("{contents}", contents).replace("{sendTime}", sendTime);
	}

	function appendTalk(id, sender, contents, sendTime) {
		 if (sender == meFullname) {
			$("#jp-container").append(myTalk(id, contents, sendTime));
		} else {
			$("#jp-container").append(otherTalk(id, sender, contents, sendTime));
		}
	}

	var lastSendTime;
	var no_talk_on = true;
	$("#talk_record").mouseover(function() {
		no_talk_on = false;
	}).mouseout(function() {
		no_talk_on = true
	});
	
	var listChartTime=0;

	function listChat() {
		$.ajax({
			url : "incident/incident/majorChat/listByIncidentId",
			data : {
				"incidentId" : "${model.id}",
				"lastId" : listChartTime
			},
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					appendTalk(data[i].id, data[i].senderName, data[i].contents, data[i].sendTime);
				}
				if (data.length > 0) {
					listChartTime = data[data.length - 1].sendOrd;
				}
				if (no_talk_on) {
					$('#talk_record').scrollTop($('#jp-container').height() + 400);
				}
			}
		});

	}

	function updateChat() {
		listChat()
	}

	function sendChat() {
		var chatContent = chatEditor.getContent();
		if ("" == chatContent || !chatContent) {
			isperp.alert("请输入内容再发送");
			return false;
		}

		$.ajax({
			url : "incident/incident/majorChat/sendChat",
			data : {
				"incidentId" : "${model.id}",
				contents : chatContent
			},
			success : function(data) {
				//appendTalk(data.data.id, meFullname, chatContent, new Date().format("yyyy-MM-dd hh:mm"));
				//lastid = data.data.id;
				updateChat();

				$('#talk_record').scrollTop($('#talk_record').height() + 1000);
				chatEditor.setContent("");
			}
		});
	}

	updateChat();
	setInterval(updateChat, 5000);

	var chatEditor = UE.getEditor('chatcontents')

	//设置字体颜色
	chatEditor.execCommand("forecolor", "#ff0000");

	var happenTime = "${model.happenTime}".substring(0, 19);
	var date1 = new Date(happenTime.replace(/-/g, "/"));

	function updateDistanceTime(solveDate) {
		var date2 = undefined;
		if (solveDate) {
			date2 = solveDate;
		} else {
			date2 = new Date();
		}

		var date3 = date2.getTime() - date1.getTime();
		var days = Math.floor(date3 / (24 * 3600 * 1000))
		var leave1 = date3 % (24 * 3600 * 1000);
		var hours = Math.floor(leave1 / (3600 * 1000));
		var leave2 = leave1 % (3600 * 1000);
		var minutes = Math.floor(leave2 / (60 * 1000));
		var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
		var seconds = Math.round(leave3 / 1000);

		$("#distanceDay").text(days);
		$("#distanceHour").text(hours);
		$("#distanceMin").text(minutes);
		$("#distanceSec").text(seconds);
	}

	var saveMarjoHandle = function(_data) {
		if (!_data.date || !_data.content) {
			isperp.errorAlert("时间点及内容不能为空！");
			return false;
		}

		isperp.showLoading();
		$.ajax({
			type : "POST",
			url : "incident/incident/majorHandle/save",
			data : {
				id : _data.id,
				incidentId : "${model.id}",
				handleTime : _data.date,
				contents : _data.content
			},
			async : false,
			success : function(data) {
				isperp.hideLoading();
			}
		});
	};

	var tl = $('#timeliner').timeliner({
		deleteBtnTpl : "",
		onInit : function(item) {

		},
		onAdd : function(_data) {
			saveMarjoHandle(_data);

		},
		onEdit : function(_data, _callback) {
			saveMarjoHandle(_data);
		},
		onDelete : function(_data, _callback) {

		}
	});

	var timelinerItemCount = 0;

	function addTimelinerItem() {

		$.ajax({
			url : "screen/screen/incidentMajorHandle?id=${model.id}",
			dataType : "json",
			success : function(data) {
				$('#majorHandleCount').text(data.length);
				for (var i = timelinerItemCount; i < data.length; i++) {
					var d = {
						id : data[i].id,
						date : data[i].handleTime,
						title : "",
						content : data[i].contents,
						'class' : "timeline_bg timeline_bg" + i % 2
					};

					tl.add(d);
				}
				if (timelinerItemCount != data.length) {
					tl.render();
					isperp.tooltip("有新的最新状况！");

				}

				timelinerItemCount = data.length;

			}
		});

	}

	$(document).ready(function() {
		var winHeight = $(window).height();

		var talkRecordTop = $('#talk_record').position().top;
		var tHeight = winHeight - talkRecordTop;
		$("#talk_record").height((tHeight - 180) + "px")
		$('#talk_record').scrollTop($('#talk_record').height() + 1000);

		personTaskGrid.jqGrid.setGridHeight(winHeight - 165);
		majorMemberGrid.jqGrid.setGridHeight(winHeight - 190);
		processRelationGrid.jqGrid.setGridHeight(winHeight - 165);

		$("#timeliner").height((winHeight - 145) + "px");

		var solvedDate = "${model.solvedDate}";

		if (solvedDate == "") {

			updateDistanceTime();
			setInterval(updateDistanceTime, 1000);
			setInterval(addTimelinerItem, 10000);
		} else {
			updateDistanceTime(new Date(solvedDate.substring(0, 16).replace(new RegExp(/-/gm), "/")));
		}

	});

	addTimelinerItem();

	var majorHandleTimeliner = {
		reload : function() {
			addTimelinerItem();
		}
	};
//-->
</script>